<script setup>
import MButton from '@/components/MButton.vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  footer: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '请选择'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确认'
  },
  height: {
    type: String,
    default: '50%'
  }
})
const emits = defineEmits(['update:show', 'confirm', 'cancel'])
const showPicker = computed({
  get() {
    return props.show
  },
  set(val) {
    emits('update:show', val)
  }
})
// 确认事件
const handleConfirm = () => {
  emits('confirm')
}
// 取消事件
const handleCancel = () => {
  emits('cancel')
}
</script>

<template>
  <van-popup
    v-model="showPicker"
    :style="{ height: height }"
    close-icon="arrow-down"
    closeable
    custom-style="border-top-left-radius: 3px;border-top-right-radius: 3px;"
    position="bottom"
    round
  >
    <div
      class="h-full box-border overflow-hidden flex flex-col"
      :class="footer ? 'pb-64px' : ''"
    >
      <div
        class="px-12px flex items-center border-b-1px h-50px border-b-solid border-b-[#F2F5FA]"
      >
        <slot name="title">
          <span class="text-16px font-600 leading-16px text-#171A1D">
            {{ title }}
          </span>
        </slot>
      </div>
      <div
        class="w-full box-border flex-1 overflow-x-hidden overflow-y-auto pb-40px"
      >
        <slot />
      </div>
      <div
        v-if="footer"
        class="absolute bottom-0 h-65px pb-15px pt-10px px-12px w-full box-border shadow-[0_-10px_16px_0_#0000000d] bg-#FFFFFF"
      >
        <slot name="footer">
          <div class="flex justify-between w-full gap-10px box-border">
            <m-button m-class="w-96px h-40px" plain @click="handleCancel">{{ cancelText }}</m-button>
            <m-button m-class="w-240px h-40px" @click="handleConfirm">{{ confirmText }}</m-button>
          </div>
        </slot>
      </div>
    </div>
  </van-popup>
</template>
<style lang="less" scoped>

</style>
